<template>
  <div>
    <span class="time-date">{{ date }}</span>
    <span class="time-span"> {{ time }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: "",
      time: "",
    };
  },
  mounted() {
    this.getdate();
    this.timer = setInterval(() => {
      this.getdate();
    }, 3000);
  },
  methods: {
    getdate: function () {
      let weeks = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      let time = new Date();
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      let week = weeks[time.getDay()];
      this.getTime();
      this.date = year + "/" + month + "/" + day + " " + week;
    },
    getTime: function () {
      let time = new Date();
      let hour = time.getHours();
      let minutes = time.getMinutes();
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      this.time = hour + "：" + minutes;
    },
  },
};
</script>

<style scoped>
.time-date{
      font-size:3rem;
}
.time-span {
  background: linear-gradient(0deg, #a3dafe 0%, #ffffff 100%);
  background-clip: text;
  font-weight: 900;
  -webkit-text-fill-color: transparent;
  font-size:5.5rem;
}
</style>